<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.saled }}</view>
				<view></view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="u-m-t-12">
			<orderlist-card :item="dataInfo" :show-button="false" :show-status="false"></orderlist-card>
		</view>
		
		<!-- 选项 -->
		<view
		class="bg-white u-m-t-10"
		style="padding: 44rpx 30rpx 44rpx 24rpx;">
			<view
			v-for="(item, index) in options"
			:key="index"
			:class="['flex-center-between', index ? 'u-m-t-66' : '']"
			@click="jumpAction(item)">
				<view class="flex">
					<image
					:src="item.icon"
					style="width: 42rpx; height: 42rpx;"
					class="u-m-r-18 clear-flex u-m-t-10"></image>
					<view>
						<view class="u-f-36 u-lh-50 font-medio">{{ lang_order[item.key + 'Tips'] }}</view>
						<view class="u-f-24 u-lh-34 color-grew">{{ lang_order[item.key + 'SubTips'] }}</view>
					</view>
				</view>
				<u-icon name="right" custom-prefix="u" size="24" color="#999"></u-icon>
			</view>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx"></view>
	</view>
</template>

<script>
	import { orderInfo } from '@/api/user/order.js'
	export default {
		data() {
			return {
				options: [],
				orderNumber: '',
				dataInfo: {}
			}
		},
		onLoad({ orderNumber }) {
			this.orderNumber = orderNumber
			this.initInfo()
			let options = [
				{ key: 'saledRefund', icon: 'refund', value: 1, label: '我要退款（无需退货）', tips: '没有收到货，或与卖家协商同意不用退货只退款' },
				{ key: 'saledReturn', icon: 'return', value: 2, label: '我要退款退货', tips: '已收到货物，需要退换收到的货物' }
			].map(item => {
				let result = {
					...item,
					icon: require(`@/static/image/order/saled_${ item.icon }.png`)
				}
				return result
			})
			this.options = options
		},
		methods: {
			// 跳转
			jumpAction(item) {
				uni.navigateTo({
					url: `/pages/user/order/saled/refund/refund?orderNumber=${ this.orderNumber }&refundAction=${ item.value }`,
					success: res => {
						res.eventChannel.emit('saled-refund', this.dataInfo)
					}
				})
			},
			// 初始化详情
			initInfo() {
				orderInfo({ orderNumber: this.orderNumber }).then(result => {
					this.dataInfo = result
				})
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
